<?php

use yii\helpers\Html;
use yii\widgets\ActiveForm;
use yii\web\JsExpression;

/* @var $this yii\web\View */
/* @var $model app\models\Mdsparts */
/* @var $form yii\widgets\ActiveForm */
?>

<div class="mdsparts-form">

    <?php $form = ActiveForm::begin(); ?>

    <?= $form->field($model, 'title')->textInput(['maxlength' => true]) ?>

    <?= $form->field($model, 'part_number')->textInput(['maxlength' => true]) ?>

    <?= $form->field($model, 'manufacturer_number')->textInput(['maxlength' => true]) ?>

    <?= $form->field($model, 'list_price')->textInput(['maxlength' => true]) ?>

    <?= $form->field($model, 'universal_part')->textInput() ?>

    <div class="form-group field-mdsparts-universal_part required">
        <label class="control-label" for="mdsparts-list_price">Brand</label>
        <?php

        $data = \app\models\Brand::find()
            ->select(['title as value', 'id as name'])
            ->asArray()
            ->all();
        //    print_r( $data ); die();
        echo \yii\jui\AutoComplete::widget([
            'model' => $model,
            'attribute' => 'brand_title',
            'options'=>
                [ 'class' => 'form-control'],
            'clientOptions' => [
                'source' => $data,
                'autoFill'=>true,
                'minLength'=>'2',
                'select' => new JsExpression("function( event, ui ) {

                //$('input[name=\"Mdsparts[brand_title]\"]').val(ui.item.value);
                $('#mdsparts-brand_title').val(ui.item.value);
                $('#mdsparts-brand_id').val(ui.item.name);
            }")
            ],

        ])?>
    </div>

    <?//= $form->field($model, 'brand_title')->textInput(['maxlength' => true]) ?>
    <div style="display:none">
        <?= $form->field($model, 'brand_id')->hiddenInput(['maxlength' => true]) ?>
    </div>

    <?= $form->field($model, 'description')->textarea(['rows' => 6]) ?>

    <?= $form->field($model, 'fits')->textarea(['rows' => 6]) ?>

    <?= $form->field($model, 'specifications_json')->textarea(['rows' => 6]) ?>

    <?= $form->field($model, 'Quantity_Sold')->textInput(['maxlength' => true]) ?>

    <?= $form->field($model, 'Product_Fit')->textInput(['maxlength' => true]) ?>

    <?= $form->field($model, 'Warranty')->textInput(['maxlength' => true]) ?>

    <?= $form->field($model, 'Color_Finish')->textInput(['maxlength' => true]) ?>

    <?= $form->field($model, 'Material')->textInput(['maxlength' => true]) ?>

    <?= $form->field($model, 'Location')->textInput(['maxlength' => true]) ?>

    <?= $form->field($model, 'Series')->textInput(['maxlength' => true]) ?>

    <?= $form->field($model, 'Notes')->textarea(['rows' => 6]) ?>

    <?= $form->field($model, 'Seat_Type')->textInput(['maxlength' => true]) ?>

    <?= $form->field($model, 'Fit_Note')->textarea(['rows' => 6]) ?>

    <?= $form->field($model, 'Design')->textInput(['maxlength' => true]) ?>

    <?= $form->field($model, 'Position')->textInput(['maxlength' => true]) ?>

    <?= $form->field($model, 'Type')->textInput(['maxlength' => true]) ?>

    <?= $form->field($model, 'Row')->textInput(['maxlength' => true]) ?>

    <?= $form->field($model, 'Recommended_Use')->textInput(['maxlength' => true]) ?>

    <?= $form->field($model, 'Vehicle_Body_Type')->textInput(['maxlength' => true]) ?>

    <?= $form->field($model, 'Construction')->textInput(['maxlength' => true]) ?>

    <?= $form->field($model, 'Kit_Type')->textInput(['maxlength' => true]) ?>

    <div class="form-group">
        <?= Html::submitButton($model->isNewRecord ? 'Create' : 'Update', ['class' => $model->isNewRecord ? 'btn btn-success' : 'btn btn-primary']) ?>
    </div>

    <?php ActiveForm::end(); ?>


    <div class="form-group field-mdsparts-construction required">
        <label class="control-label" for="mdsparts-construction">
            添加发动机
        </label>
        <?php
        echo \yii\jui\AutoComplete::widget([
            'model' => $engineModel,
            'attribute' => 'title',
            'options'=>
                [ 'class' => 'form-control'],
            'clientOptions' => [
                'source' => new JsExpression("function( request, response )  {
$.ajax({
                    url: \"/backend/web/index.php?r=engine/ajax_search\",
                    dataType: \"json\",
                    data:{
                        title : request.term
                    },
                    success: function( data ) {
                        response( $.map( data.engines, function( item ) {
                            return {
                                title : item.title,
                                value: 'title:' + item.title + '  make:' + item.make+ '  model:' + item.model,
                                name: item.id
                            }
                        }));
                    }
                });
        }"),
                'autoFill'=>true,
                'minLength'=>'2',
                'select' => new JsExpression("function( event, ui ) {
                    addEngine( $model->id, ui.item.name );
                }")
            ],

        ])
        ?>
    </div>

    <style>
        #engines-group .engine-item{
            display:inline-block;
            border:solid 1px #cdcdcd;
            border-radius: 5px;
            padding:5px 10px;
            margin:10px;
        }

        #engines-group .engine-item a{
            display:inline-block;
            width:10px;
            margin:0 5px;
            color:#ff00ff;
            cursor:pointer;
        }
    </style>
    <div class="form-group field-mdsparts-construction required">
        <label class="control-label" for="mdsparts-construction">
            已有发动机
        </label>
        <div id="engines-group" class=" groups ">
            <?php
//                foreach( $engines as $key => $v ){
//                    echo '';
//                }
            ?>
        </div>
    </div>

    <script>
        function deleteEngine( part_id, engine_id ){

            var url = '/backend/web/index.php?r=mdsparts/api_engine_delete';
            var data = {
                part_id : part_id,
                engine_id : engine_id
            };
            $.post( url, data, function( json ){
                getEngines( part_id );
            });

        }
        function addEngine( part_id, engine_id ){

            var url = '/backend/web/index.php?r=mdsparts/api_engine_add';
            var data = {
                part_id : part_id,
                engine_id : engine_id
            };
            $.post( url, data, function( json ){
                getEngines( part_id );
            });

        }

        function getEngines( partsId ){
            var url = '/backend/web/index.php?r=mdsparts/api_engine';
            var data = {
                id : partsId
            };
            $.get( url, data, function( json ){
                var html = '';
                var l = json.length;
                for( var i = 0; i < l; i ++ ){
                    html += '<span class=\"engine-item\" '
                        + ' title=\" make:' + json[i].make
                        + ', model:' + json[i].model
                        + ', submodel:' + json[i].submodel+ ' \">'
                        + json[i].title + '<a id=\"engine-' + json[i].id + '\"class=\"delete\">X</a></span>'
                }
                $('#engines-group').html( html );
            });
        }

        $('.engine-item a').live('click',function(){
            var part_id = <?= $model->id; ?>;console.log( this );
            var engine_id = this.id.split('-')[1];
            deleteEngine( part_id, engine_id );

        });
        getEngines( <?= $model->id; ?> );
    </script>
</div>
